import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';

import Store from './store.js';
import './index.less';
import classnames from 'classnames';

//component
import ImageEditor from 'components/widgets/ImageEditor';
import ReIcon from 'components/widgets/ReIcon';
import ReButton from 'components/widgets/ReButton';


@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'ArtworkEditor';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount(this.refs);
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    renderDialog() {

        let description = '';
        let isCover = this.store.isCover;
        let isAvatar = this.store.isAvatar;
        let headerName = '上传封面';
        headerName = isAvatar ? '上传头像' : headerName;
        let wrapeprClass = classnames({
            'editor-wrapper': true,
            'cover': isCover,
            'avatar': isAvatar,
        })
        return (
            <div className={this.store.visible ? 'editor-mask fade-in' : 'editor-mask fade-out'}>
                <div className={wrapeprClass}
                     onClick={(e) => e.stopPropagation()}>
                    <div className="editor-header">
                        <p>{headerName}</p>
                        <span onClick={(e) => this.store.closeDialog(e)}>
                            <ReIcon className="close" icon="window_closes"/>
                        </span>
                    </div>
                    <div className="editor-content">
                        <ImageEditor ref="editor"
                                     imageRadio={this.store.radio}
                                     image={this.store.imageEdit || ''}
                                     isLoading={this.store.imageLoading}
                                     uploadAvatar={this.store.isAvatar}
                                     uploadCover={this.store.isCover}/>
                        {
                            (isCover || isAvatar) &&
                            <div className="text-wrapper">
                                <div className="re-upload">
                                    <span onClick={() => this.refs.reUpload.click()}>{$$.LN.REUPLOAD}</span>
                                    <input type='file' ref="reUpload"
                                           onChange={(e) => this.store.reUpload(e, this.refs.reUpload)}
                                           accept="image/jpg,image/png,image/jpeg"/>
                                </div>
                                <p className="description">{description}</p>
                            </div>
                        }
                    </div>
                    <div className="editor-footer">
                        <ReButton
                            onTouchTap={(e) => this.store.closeDialog(e, this.refs.editor.refs.cropper)}
                            className="cancel"
                            label={$$.LN.CANCEL}
                        />
                        <ReButton
                            onTouchTap={(e) => this.store.confirmDialog(e, this.refs.editor.refs.cropper, this.store.uploadAvatar)}
                            className="confirm"
                            label={$$.LN.CONFIRM}/>
                    </div>
                    <div className="editor-footer-phone">
                        <span onClick={(e) => this.store.closeDialog(e)}>
                            <ReIcon className="delete" icon="delete"/>
                        </span>
                        <span onClick={(e) => this.store.resetEditor(e, this.refs.editor.refs.cropper)}
                              className="reset-editor">还原</span>
                        <span
                            onClick={(e) => this.store.confirmDialog(e, this.refs.editor.refs.cropper, this.store.uploadAvatar)}>
                            <ReIcon className="define" icon="define"/>
                        </span>
                    </div>
                </div>
            </div>
        );
    }

    render() {

        return (
            <div className="orin-s-artworkeditor-root">
                {this.renderDialog()}
            </div>
        );
    }
}